<template>
	<view>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
			:down="downOption" :up="upOption">
			<view style="display: flex;flex-direction: row;flex-wrap: wrap;justify-content: center;">
				<view class="coupon-item" v-for="(item, index) in list" :key="index">
					<view class="coupon-num">
						<text class="gradient coupon-num-dw">￥</text>
						<view class="gradient coupon-num-text" >{{item.coupon_price}}</view>
					</view>
					
					<view style="display: flex;flex-direction: column;color: #fff;justify-content: center;margin-left: 40rpx;flex: 1;">
						<text style="font-size: 36rpx;">{{item.title}}</text>
						<text style="font-size: 16rpx;">({{item.desc}})</text>
						<text style="font-size: 16rpx;">使用时间: {{item.start_use_day}}-{{item.end_use_day}}</text>
					</view>
					<view v-if="item.is_receive == 1" class="lingqu" style="background-color: #c5c5c5;">
						<text>已</text>
						<text>领</text>
					</view>
					<view v-else class="lingqu" @click="couponReceiveFn(item.id)">
						<text>点击</text>
						<text>领取</text>
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {couponList, couponReceive} from "@/common/http.api.js"
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				pagination: {
					auto: false,
					page: 1,
					pageSize: 20,
					total: 0,
				},
				loadStatus: 'loadmore',
				upOption: {
					auto: false,
					page: {
						size: 20 // 每页数据的数量,默认10
					},
					empty: {
						tip: '暂无相关数据'
					},
					textNoMore: "没有更多数据了"
				},
				list: [],
			}
		},
		methods: {
			couponReceiveFn(coupon_id){
				let that = this;
				couponReceive({coupon_id
				}).then(res => {
					that.$u.toast('领取成功');
				})
			},
			getData(page){
				let that = this;
				couponList({
					page,
					pageSize: this.pagination.pageSize,
				}).then(res => {
					that.mescroll.endByPage(res.data.length, res.pagination.total)
					that.pagination = res.pagination;
					if (page == 1) {
						that.list = res.data
					} else {
						that.list = [...that.list, ...res.data]
					}
					that.pagination.page++
				})
			},
			upCallback() {
				this.getData(this.pagination.page)
			},
			downCallback() {
				this.pagination.page = 1;
				this.mescroll.resetUpScroll();
			},
		}
	}
</script>

<style lang="scss">
	.gradient{
		background-image:-webkit-linear-gradient(bottom,#FEE474,#FDFECA,#FEE474);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		-webkit-animation: hue 60s infinite linear;
	}
	.coupon-item{
		background-image: url('https://img.koalalf.com/coupon/bg-1.png'); 
		width: 700rpx; 
		height: 210rpx; 
		background-size: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin: 20rpx 0;
	}
	.coupon-num{
		display: flex;
		align-items: baseline;
		padding-left: 40rpx;
		.coupon-num-dw{
			font-size: 32rpx;
			font-weight: bold;
		}
		.coupon-num-text{
			font-size: 122rpx;
			font-weight: bold;
		}
	}
	.lingqu{
		width: 96rpx; 
		height: 96rpx;
		border-radius: 50%;
		color: #fff;
		background-color: #F63E3D;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		margin-right: 24rpx;
		flex-direction: column;
		margin-top: 16rpx;
	}
</style>
